* {
    margin: 0;
    padding: 0;
  }
  
  body {
    position: relative;
    width: 100%;
    height: 750rem;
    background: url("./img/background.jpg") no-repeat;
    background-size: 120%;
    background-position: top center;
    display: flex;
    justify-content: center;
  }
  
  /* 上面的大盒子 */
  .topbox {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 最上面的一栏 */
  .top {
    height: 90rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15rem;
    box-sizing: border-box;
  }
  
  /* 时间和金钱盒子共同样式 */
  .top div {
    height: 40rem;
    border: 8rem solid #8c6900;
    border-radius: 75rem;
    background: linear-gradient(180deg, #ffe699 50%, #ffd24d 50%);
  }
  
  /* 时间 */
  .top .time {
    width: 150rem;
  }
  
  /* 顶部文字样式 */
  .top p {
    line-height: 40rem;
    font-size: 20rem;
    color: #8c6900;
    width: 100%;
    text-align: center;
  }
  
  /* 金钱 */
  .top #money {
    text-align: right;
  }
  
  .top .money {
    width: 230rem;
    padding-right: 15rem;
  }
  
  /* 厨师框 */
  .box .cook {
    min-height: 150rem;
    width: 460rem;
    box-sizing: border-box;
    background: #ffd24d;
    border: 8rem solid #fff;
    border-radius: 20rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10rem 0;
  }
  
  /* 厨师样式 */
  .chef {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: url("./img/chef.png");
    background-position: center center;
    background-size: 120%;
  }
  
  /* 删除厨师按钮 */
  .delete {
    position: absolute;
    right: -15rem;
    top: -30rem;
    color: #cc9979;
    font-size: 50rem;
    font-weight: 600;
  }
  
  /* 添加厨师 */
  .add-chef {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: url("./img/add-chef.png");
    background-position: center center;
    background-size: 100%;
  }
  
  /* 厨师正在烹饪 */
  .box .chef_cooking {
    width: 90rem;
    height: 90rem;
    border: 5rem solid #fff;
    border-radius: 50rem;
    background: linear-gradient(-90deg, #ff9122 50%, #d96d00 50%);
    margin: 5rem 23rem;
  }
  
  /* 中间顾客框 */
  .box .customer {
    height: 270rem;
    width: 460rem;
    margin: 0 auto;
    background-color: #ffa64d;
    border: 8rem solid #fff;
    border-radius: 35rem;
    margin-top: 40rem;
    display: flex;
    flex-wrap: wrap;
    padding: 15rem 30rem;
    box-sizing: border-box;
  }
  
  /* 座位 */
  .box .zuowei {
    width: 90rem;
    height: 90rem;
    border: 5rem solid #fff;
    border-radius: 50rem;
    background: linear-gradient(-90deg, #aaa 50%, #ddd 50%);
    margin: 5rem 23rem;
  }
  
  .box .customer .zuowei {
    margin: 0;
  }
  
  .box .customer .guke {
    width: 190rem;
    height: 110rem;
  }
  
  
  /* 顾客在座位等餐 */
  .box .guke_sit {
    width: 90rem;
    height: 90rem;
    border: 5rem solid #fff;
    border-radius: 50rem;
    background: linear-gradient(-90deg, #ff2626 50%, #b20000 50%);
    margin: 0;
  }